// OpenTiny 全局主题配置
// 基于家庭媒体管理系统的C端UI设计规范

// ================================
// 主题色彩配置
// ================================

// 主要品牌色配置
:root {
  // 品牌主色 - 温暖蓝色系
  --ti-primary-color: #0ea5e9;
  --ti-primary-color-hover: #38bdf8;
  --ti-primary-color-active: #0284c7;
  --ti-primary-color-disabled: #bae6fd;
  
  // 辅助色配置  
  --ti-accent-color: #f97316;
  --ti-accent-color-hover: #fb923c;
  --ti-accent-color-active: #ea580c;
  
  // 功能状态色
  --ti-success-color: #22c55e;
  --ti-success-color-hover: #16a34a;
  --ti-success-color-active: #15803d;
  
  --ti-warning-color: #eab308;
  --ti-warning-color-hover: #ca8a04;
  --ti-warning-color-active: #a16207;
  
  --ti-error-color: #ef4444;
  --ti-error-color-hover: #dc2626;
  --ti-error-color-active: #b91c1c;
  
  --ti-info-color: #3b82f6;
  --ti-info-color-hover: #2563eb;
  --ti-info-color-active: #1d4ed8;
  
  // 中性色配置
  --ti-text-color-primary: #334155;      // 主要文本
  --ti-text-color-regular: #475569;      // 常规文本
  --ti-text-color-secondary: #64748b;    // 次要文本
  --ti-text-color-placeholder: #94a3b8;  // 占位符文本
  --ti-text-color-disabled: #cbd5e1;     // 禁用文本
  
  // 背景色配置
  --ti-background-color: #ffffff;        // 主背景
  --ti-background-color-secondary: #f8fafc; // 次背景
  --ti-background-color-tertiary: #f1f5f9;  // 三级背景
  --ti-background-color-hover: #f0f9ff;     // 悬停背景
  
  // 边框配置
  --ti-border-color: #e2e8f0;           // 主边框
  --ti-border-color-light: #f1f5f9;     // 浅边框
  --ti-border-color-lighter: #f8fafc;   // 更浅边框
  --ti-border-color-extra-light: #fafafa; // 极浅边框
  
  // 圆角配置
  --ti-border-radius-default: 0.375rem;  // 6px - 标准圆角
  --ti-border-radius-small: 0.25rem;     // 4px - 小圆角
  --ti-border-radius-large: 0.5rem;      // 8px - 大圆角
  --ti-border-radius-round: 9999px;      // 完全圆角
  
  // 阴影配置
  --ti-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --ti-box-shadow-light: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --ti-box-shadow-medium: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --ti-box-shadow-large: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  // 字体配置
  --ti-font-family: 'SF Pro Display', '-apple-system', 'BlinkMacSystemFont', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Segoe UI', sans-serif;
  --ti-font-size-base: 16px;            // 基础字体大小
  --ti-font-size-small: 14px;           // 小字体
  --ti-font-size-large: 18px;           // 大字体
  --ti-font-weight-normal: 400;         // 正常字重
  --ti-font-weight-medium: 500;         // 中等字重
  --ti-font-weight-semibold: 600;       // 半粗字重
  --ti-font-weight-bold: 700;           // 粗体字重
  
  // 间距配置 - 基于8px网格系统
  --ti-spacing-base: 8px;               // 基础间距
  --ti-spacing-small: 4px;              // 小间距
  --ti-spacing-medium: 12px;            // 中等间距
  --ti-spacing-large: 16px;             // 大间距
  --ti-spacing-xl: 24px;                // 超大间距
  --ti-spacing-2xl: 32px;               // 2倍超大间距
  --ti-spacing-3xl: 48px;               // 3倍超大间距
  
  // 组件特定配置
  --ti-button-height-default: 40px;     // 按钮默认高度
  --ti-button-height-small: 32px;       // 小按钮高度
  --ti-button-height-large: 48px;       // 大按钮高度
  --ti-button-padding-horizontal: 16px; // 按钮水平内边距
  
  --ti-input-height-default: 40px;      // 输入框默认高度
  --ti-input-height-small: 32px;        // 小输入框高度
  --ti-input-height-large: 48px;        // 大输入框高度
  --ti-input-padding-horizontal: 12px;  // 输入框水平内边距
  
  // 媒体类型色彩
  --ti-media-photo-color: #ec4899;      // 照片色
  --ti-media-video-color: #8b5cf6;      // 视频色
  --ti-media-audio-color: #06b6d4;      // 音频色
  --ti-media-document-color: #84cc16;   // 文档色
  --ti-media-album-color: #f59e0b;      // 相册色
}

// ================================
// 暗色主题配置
// ================================

[data-theme="dark"] {
  // 暗色主题色彩覆盖
  --ti-primary-color: #38bdf8;
  --ti-primary-color-hover: #7dd3fc;
  --ti-primary-color-active: #0ea5e9;
  
  --ti-text-color-primary: #f1f5f9;     // 暗色主文本
  --ti-text-color-regular: #e2e8f0;     // 暗色常规文本
  --ti-text-color-secondary: #cbd5e1;   // 暗色次要文本
  --ti-text-color-placeholder: #94a3b8; // 暗色占位符
  --ti-text-color-disabled: #64748b;    // 暗色禁用文本
  
  --ti-background-color: #0f172a;        // 暗色主背景
  --ti-background-color-secondary: #1e293b; // 暗色次背景
  --ti-background-color-tertiary: #334155;  // 暗色三级背景
  --ti-background-color-hover: #1e293b;     // 暗色悬停背景
  
  --ti-border-color: #334155;           // 暗色主边框
  --ti-border-color-light: #475569;     // 暗色浅边框
  --ti-border-color-lighter: #64748b;   // 暗色更浅边框
  
  --ti-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --ti-box-shadow-light: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}

// ================================
// 响应式断点配置
// ================================

:root {
  --ti-breakpoint-xs: 475px;
  --ti-breakpoint-sm: 640px;
  --ti-breakpoint-md: 768px;
  --ti-breakpoint-lg: 1024px;
  --ti-breakpoint-xl: 1280px;
  --ti-breakpoint-2xl: 1536px;
}

// ================================
// 动画配置
// ================================

:root {
  // 缓动函数
  --ti-ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ti-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ti-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ti-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  // 动画持续时间
  --ti-duration-fast: 0.15s;
  --ti-duration-normal: 0.3s;
  --ti-duration-slow: 0.5s;
  
  // 过渡效果
  --ti-transition-base: all var(--ti-duration-normal) var(--ti-ease-out);
  --ti-transition-fast: all var(--ti-duration-fast) var(--ti-ease-out);
  --ti-transition-slow: all var(--ti-duration-slow) var(--ti-ease-out);
}

// ================================
// 工具类配置
// ================================

// Z-index层级
:root {
  --ti-z-index-dropdown: 1000;
  --ti-z-index-sticky: 1020;
  --ti-z-index-fixed: 1030;
  --ti-z-index-modal-backdrop: 1040;
  --ti-z-index-modal: 1050;
  --ti-z-index-popover: 1060;
  --ti-z-index-tooltip: 1070;
  --ti-z-index-toast: 1080;
}

// 玻璃态效果
:root {
  --ti-glass-backdrop-blur: blur(20px);
  --ti-glass-backdrop-saturate: saturate(180%);
  --ti-glass-background-light: rgba(255, 255, 255, 0.8);
  --ti-glass-background-dark: rgba(0, 0, 0, 0.3);
  --ti-glass-border: rgba(255, 255, 255, 0.2);
}

// ================================
// 媒体查询混入
// ================================

// 响应式媒体查询
@mixin respond-to($breakpoint) {
  @if $breakpoint == 'xs' {
    @media (max-width: 474px) {
      @content;
    }
  }
  @if $breakpoint == 'sm' {
    @media (max-width: 639px) {
      @content;
    }
  }
  @if $breakpoint == 'md' {
    @media (max-width: 767px) {
      @content;
    }
  }
  @if $breakpoint == 'lg' {
    @media (max-width: 1023px) {
      @content;
    }
  }
  @if $breakpoint == 'xl' {
    @media (max-width: 1279px) {
      @content;
    }
  }
  @if $breakpoint == '2xl' {
    @media (max-width: 1535px) {
      @content;
    }
  }
}

// 最小宽度媒体查询
@mixin respond-above($breakpoint) {
  @if $breakpoint == 'xs' {
    @media (min-width: 475px) {
      @content;
    }
  }
  @if $breakpoint == 'sm' {
    @media (min-width: 640px) {
      @content;
    }
  }
  @if $breakpoint == 'md' {
    @media (min-width: 768px) {
      @content;
    }
  }
  @if $breakpoint == 'lg' {
    @media (min-width: 1024px) {
      @content;
    }
  }
  @if $breakpoint == 'xl' {
    @media (min-width: 1280px) {
      @content;
    }
  }
  @if $breakpoint == '2xl' {
    @media (min-width: 1536px) {
      @content;
    }
  }
}